<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>codemirror-girl</title>
  

<link rel="stylesheet" href="./codemirror/lib/codemirror.css">
<script src="./codemirror/lib/codemirror.js"></script>

<script src="./codemirror/addon/selection/active-line.js"></script>
<!-- mode -->
<script src="./codemirror/mode/xml/xml.js"></script>
<script src="./codemirror/mode/vue/vue.js"></script>
<script src="./codemirror/mode/sql/sql.js"></script>
<!-- theme -->
<link rel="stylesheet" href="./codemirror/theme/idea.css">

 
	
	
	
	
	
	
</head>
<body>
    
    <div>
        <h1>codemirror的龙纹身女孩</h1>
        <select id='selectmode' onchange="modeChange()">
            <option value ="sql">sql</option>
            <option value ="xml">xml</option>
            <option value="vue">vue</option>
           
          </select>
        <br>
        <textarea id="code" style="width: 100%;height: 1000px;">
            <?xml version="1.0" encoding="UTF-8"?>
            <rss xmlns:atom="http://www.w3.org/2005/Atom" version="2.0"
                 xmlns:georss="http://www.georss.org/georss"
                 xmlns:twitter="http://api.twitter.com">
              <channel>
                <title>Twitter / codemirror</title>
                <link>http://twitter.com/codemirror</link>
                <atom:link type="application/rss+xml"
                           href="http://twitter.com/statuses/user_timeline/242283288.rss" rel="self"/>
                <description>Twitter updates from CodeMirror / codemirror.</description>
                <language>en-us</language>
                <ttl>40</ttl>
              <item>
                <title>codemirror: http://cloud-ide.com — they're springing up like mushrooms. This one
                  uses CodeMirror as its editor.</title>
                <description>codemirror: http://cloud-ide.com — they're springing up like mushrooms. This
                  one uses CodeMirror as its editor.</description>
                <pubDate>Thu, 17 Mar 2011 23:34:47 +0000</pubDate>
                <guid>http://twitter.com/codemirror/statuses/48527733722058752</guid>
                <link>http://twitter.com/codemirror/statuses/48527733722058752</link>
                <twitter:source>web</twitter:source>
                <twitter:place/>
              </item>
              <item>
                <title>codemirror: Posted a description of the CodeMirror 2 internals at
                  https://codemirror.net/2/internals.html</title>
                <description>codemirror: Posted a description of the CodeMirror 2 internals at
                  https://codemirror.net/2/internals.html</description>
                <pubDate>Wed, 02 Mar 2011 12:15:09 +0000</pubDate>
                <guid>http://twitter.com/codemirror/statuses/42920879788789760</guid>
                <link>http://twitter.com/codemirror/statuses/42920879788789760</link>
                <twitter:source>web</twitter:source>
                <twitter:place/>
              </item>
              </channel>
            </rss>
        </textarea>
    </div>
</body>
<script>
    let code = document.getElementById("code");
    let option = {
        mode: "xml", //代码支持
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  theme:'idea'  ,//主题

    }
    let mirror = CodeMirror.fromTextArea(code,option)

    
    
    function modeChange(){
        let selects = document.getElementById("selectmode");
        let indexs = selects.selectedIndex;  //选中项的索引
        console.log(selects.options[indexs].value);
        console.log(selects.options[indexs].text);
        option.mode = selects.options[indexs].value;
        console.log(option)
       
        mirror.options.mode =option.mode;
        mirror.save;
        console.log(mirror)
    }
</script>
</html>